<template>
	<view>
		<view class="uni-indexed" style="height: 100%;">
			<scroll-view :scroll-into-view="scrollViewId" show-scrollbar="false" :style="{ height: winHeight + 'px' }" class="uni-indexed__list"
			 scroll-y>
			 <!-- 搜索框-->
				<view class="search-input "><label class="iconfont icon-sousuo" />
					<input type="text" confirm-type="search" v-model="search" class="font-size30" @input="searchInput" placeholder="输入你要搜索的内容" />
				</view>
				<!-- 搜索结果列表 -->
				<view v-if="search!=''" class="uni-search-lists">
					<view v-for="(items, index) in lists" :key="index" class="uni-list-item" hover-class="uni-list-cell-hover">
						<view class="uni-list-item__containerb" @tap="userItem(items)">
							<view class="cell-navigate">
								<view class="uni-list-data">
									<image class="titleImg" :src="items.headIcon"></image>
								</view>
								<view class="uni-item-left">
									<view class="font-size30 color-3A3A3A">{{items.realName}}</view>
									<view class="font-size24 color-9A9A9A">{{items.department}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 初始展示列表 -->
				<block v-else v-for="(list, idx) in lists" :key="idx">
					<view v-if="list.items && list.items.length > 0" :id="'uni-indexed-list-' + list.key" class="uni-indexed__list-title">{{ list.key }}</view>
					<view v-if="list.items && list.items.length > 0" class="uni-list">
						<view v-for="(item, index) in list.items" :key="index" class="uni-list-item" hover-class="uni-list-cell-hover">
							<view :class="[list.items.length-1==index?'uni-list-item__containers':'uni-list-item__container']" @tap="userItem(item)">
								<view class="cell-navigate">
									<view class="uni-list-data">
										<image class="titleImg" :src="item.headIcon"></image>
									</view>
									<view class="uni-item-left">
										<view class="font-size30 color-3A3A3A">{{item.realName}}</view>
										<view class="font-size24 color-9A9A9A">{{item.department}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			
			<!-- 右侧字母索引 -->
			<!-- <view :class="touchmove ? 'active' : ''" v-show="isTabShow" :style="{ height: listHeight + 'px',width:itemHeight+'px' }"
			 class="uni-indexed__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
				<text v-for="(list, key) in lists" :key="key" :class="touchmoveIndex == key ? 'active' : ''" :style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }"
				 class="uni-indexed__menu-item">
					{{ list.key }}
				</text>
			</view> -->
			<view v-if="touchmove" class="uni-indexed--alert" :style="{'top':indexedAlert}">{{ lists[touchmoveIndex].key }}</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'UniIndexedList',
		props: {
			options: {
				type: Array,
				default () {
					return [];
				}
			},
			research: {
				type: String,
				default () {
					return '';
				}
			}
		},
		data() {
			return {
				touchmove: false,
				touchmoveIndex: -1,
				itemHeight: 0,
				winHeight: 0,
				scrollViewId: '',
				itemTop: 0,
				search: '',
				searchHeight: 0,
				listHeight: 0,
				alertTop: 0,
				isTabShow: true
			};
		},
		watch: {
			lists() {
				this.isTabShow = this.search == '' ? true : false
			},
		},
		computed: {
			lists: function() {
				return this.options
			},
			indexedAlert: function() {
				let indexedAlert = 0;
				if (this.itemTop < this.alertTop + this.itemHeight - 10) {
					indexedAlert = (this.alertTop + this.itemHeight / 2 - 78) + 'px';
				} else if (this.itemTop > this.alertTop + this.itemHeight * this.options.length - this.itemHeight) {
					indexedAlert = (this.alertTop - 78 + this.itemHeight * this.options.length - this.itemHeight / 2.2) + 'px';
				} else {
					indexedAlert = (this.itemTop - 72) + 'px';
				}
				return indexedAlert;
			},
		},
		created() {
			
			let winHeight = uni.getSystemInfoSync().windowHeight - 50;
			this.winHeight = winHeight;
			this.itemHeight = (winHeight - 150) / this.options.length;
			this.listHeight = this.itemHeight * this.options.length;
		},
		
		methods: {
			/* 右侧点击字母快速查找事件 Start */
			
			// updated() {
			// 	let listHeight = uni.createSelectorQuery().in(this).select(".uni-indexed__menu");
			
			// 	if (listHeight) {
			// 		listHeight.boundingClientRect(data => {
			
			// 			this.alertTop = data.top;
			// 		}).exec();
			// 		listHeight.fields({
			// 			size: true,
			// 			scrollOffset: true
			// 		}, data => {}).exec();
			// 	}
			// },
			
			
			// touchStart(e) {
			// 	this.touchmove = true;
			// 	let pageY = e.touches[0].pageY;
			// 	let index = Math.floor((pageY - 100) / this.itemHeight);
			// 	let item = this.lists[index];
			// 	this.itemTop = pageY;
			// 	if (item) {
			// 		this.scrollViewId = 'uni-indexed-list-' + item.key;
			// 		this.touchmoveIndex = index;
			// 	}
			// },
			
			// touchMove(e) {
			// 	let pageY = e.touches[0].pageY;
			// 	let index = Math.floor((pageY - 100) / this.itemHeight);
			// 	let item = this.lists[index];
			// 	this.itemTop = pageY;
			// 	if (item) {
			// 		this.scrollViewId = 'uni-indexed-list-' + item.key;
			// 		this.touchmoveIndex = index;
			// 	}
			// },
			
			// touchEnd() {
			// 	this.touchmove = false;
			// 	this.itemTop = 0;
			// 	this.touchmoveIndex = -1;
			// },
			
			/* 右侧点击字母快速查找事件 End */
			
			userItem(item) {
				
				this.$emit('userItem', item);
			},
			searchInput() {
				this.$nextTick(function() {
					this.$emit('searchInput', this.search);
				})
			},
			reEsearch() {
				this.search = '';
				this.searchInput();
			},
		},
		mounted() {
			let searchHeight = uni.createSelectorQuery().in(this).select(".search-input");
			searchHeight.fields({
				size: true,
				scrollOffset: true,
			}, data => {
				this.searchHeight = data.height;
			}).exec();
		}
	};
</script>
<style>
	@charset "UTF-8";

	.uni-list {
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column
	}

	.search-input {
		background: #FFFFFF;
	}

	.uni-search-lists {
		margin-top: 20rpx;
	}

	.uni-list-item {
		font-size: 32upx;
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		background-color:#FFFFFF;
	}

	.uni-list-item__container {
		padding: 0rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-item__containers {
		padding: 0rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-item__containerb {
		padding: 10rpx 24rpx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.uni-list-item__container:after {
		position: absolute;
		z-index: 3;
		right: 30upx;
		bottom: 0;
		left: 30upx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc
	}

	.cell-navigate::after {
		content: none;
		display: none;
	}

	.uni-indexed {
		display: flex;
		flex-direction: column;
		position: relative;
		background: rgba(238, 240, 243, 1);
	}

	.uni-indexed__list {
		overflow: hidden;
		flex: 1;
		height: 100vh;
		width: 100%;
	}

	.uni-indexed__list-title {
		padding: 2upx 24upx;
		color: #9A9A9A;
		line-height: 1.5;
		background-color: rgba(238, 240, 243, 1);
		font-size: 28upx;
	}

	.uni-indexed__menu {
		/* width: 44upx; */
		position: absolute;
		right: 10rpx;
		top: 10%;
		height: 100vh;
		background: rgba(255, 255, 255, 0);
		display: flex;
		margin-right: 6rpx;
		justify-content: center;
		flex-direction: column;
		z-index: 999;
	}


	.uni-indexed__menu.active .uni-indexed__menu-item.active {
		color: #FFFFFF;
		background: linear-gradient(-90deg, rgba(72, 105, 238, 1), rgba(75, 139, 249, 1)) !important;
	}

	.uni-indexed__menu-item {
		color: #9A9A9A;
		font-size: 22upx;
		text-align: center;
		border-radius: 50%;
	}

	.uni-indexed--alert {
		position: absolute;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		z-index: 20;
		top: 0;
		width: 100upx;
		height: 100upx;
		right: 12%;
		border-radius: 50%;
		text-align: center;
		font-size: 40upx;
		color: #fff;
		background-color: #CCCCCC;
	}

	.uni-indexed--alert::after {
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		right: -103%;
		top: 8%;
		transform: translate(-50%);
		border: 42rpx solid;
		border-color: transparent transparent transparent #CCCCCC;
	}

	.titleImg {
		width: 88upx;
		height: 88upx;
		border-radius: 50%;
	}

	.cell-navigate {
		border-bottom: 1rpx solid #C8C7CC;
	}
</style>
